<template>
  <a-button @click="showDrawer"><bars-outlined/>分类管理</a-button>
  <a-drawer title="产品分类设置"
            v-model:open="state.open"
            :body-style="{paddingTop:'10px'}">
    <template #extra>
      <a-space>
        <a-button type="primary" v-if="!store.createMode" @click="switchCreateMode">
          <plus-outlined/>添加
        </a-button>
        <a-button v-else @click="switchCreateMode">
          <arrow-left-outlined/>返回列表
        </a-button>
      </a-space>
    </template>
    <template v-if="store.createMode">
     <CategoryCreate @update="onChange"/>
    </template>
    <template v-else>
      <a-list :pagination="simplePageConfig"
              :data-source="store.categories"
              :loading="store.loading">
        <template #renderItem="{item,index}">
          <a-list-item :style="itemStyle">
            <template v-if="state.editorIndex === index">
              <a-space>
                <a-input v-model:value="item.name"/>
                <span class="hover" @click="confirmEditor(item,index)"><check-outlined/></span>
              </a-space>
            </template>
            <template v-else>{{ item.name }}</template>
            <template #actions>
              <div :style="{height: '32px'}" class="flex flex-items-center">
                <a-space>
                  <template #split>
                    <a-divider type="vertical"/>
                  </template>
                  <span class="hover" @click="callEditor(index)">
                <edit-outlined v-if="state.editorIndex !== index"/>
                <close-outlined v-else/>
              </span>
                  <a-popconfirm title="分类删除确认，此操作不可逆，请谨慎操作！"
                                placement="left"
                                @confirm="onDelete(item.id,index)">
                  <span class="hover hover-danger">
                    <delete-outlined/>
                  </span>
                  </a-popconfirm>
                </a-space>
              </div>
            </template>
          </a-list-item>
        </template>
      </a-list>
    </template>

  </a-drawer>
</template>

<script setup lang="ts">
import {
  PlusOutlined,
  CheckOutlined,
  EditOutlined,
  DeleteOutlined,
  CloseOutlined,
  ArrowLeftOutlined,
    BarsOutlined
} from "@ant-design/icons-vue";
import {onMounted, reactive} from "vue";
import CategoryCreate from "@/views/product/components/CategoryCreate.vue";
import {useCategoryStore} from "@/store/category";
import {simplePageConfig} from "@/config";

const itemStyle = {
  paddingLeft: 0,
  paddingRight: 0,
  paddingTop: '8px',
  paddingBottom: '8px'
}

const store = useCategoryStore()

const state = reactive({
  open:<boolean>false,
  loading: <boolean>false,
  category_name: <string>'',
  editorIndex: <number>-1,
  createMode:<boolean>false
})

const showDrawer = () => {
  state.open = true
}
const getCategoryList = async () => {
  await store.fetchCategories()
}
onMounted(() => {
  getCategoryList()
})

//唤起编辑输入框
const callEditor = (index) => {
  if (state.editorIndex === index) {
    state.editorIndex = -1
  } else {
    state.editorIndex = index
  }
}
//切换列表和添加模式
const switchCreateMode = () => {
  store.createMode = !store.createMode
  state.editorIndex = -1
}

//确认编辑结果
const confirmEditor = async (item: CategoryItem, index: number) => {
  if (item.name !== store.categories[index].name) {
    await store.updateItem(item.id, { name: item.name })
    state.editorIndex = -1
  }
}

// 删除操作
const onDelete = async (id: number) => {
  await store.deleteItem(id)
}
const onChange = ()=>{
  getCategoryList()
  state.createMode = false
  state.editorIndex = -1
}
</script>

<style scoped>

</style>